<!DOCTYPE html>
<html xmlns:th="www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>个人密码修改</title>
	<script src="../js/vue.min.js"></script>
	<script src="../js/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

</head>
<style>
	body {
		background-color: #f2f2f2;
		min-width:360px;
	}

	.message-content .message-top {
		height: 5rem;
		margin-left: 1rem;
	}
	.message-content .message-top .message-title {
		border-width: 0px;
		height: 3rem;
		font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
		font-weight: 700;
		font-style: normal;
		font-size: 16px;
		color: #434343;
		line-height: 3rem;
		text-indent: 1rem;
	}
	.button {
		background-color: rgba(0, 153, 204, 1);
		font: 14px "微软雅黑";
		color: #FFF;
		border: 0;
		height: 30px;
		width: 60px;
		left: 20px;
		border-radius: 5px;
		cursor: pointer;
	}


</style>
<body>

<div class="message-content">
	<div class="message-top" style="height: 3rem">
		<div class="message-title" id="menuName">修改密码</div>
	</div>
	<div class="message-list">
		<div>
			<input type="hidden" id="uid" th:value="${uid}"/>
			<div style="margin-right: 10px">
				<div style="margin-top: 20px;">
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;旧密码：
					<input type="password" name="password" id="password" class="input"/>
				</div>
				<div style="margin-top: 20px;">
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;新密码：
					<input type="password"  name="newPassword" id="newPassword" class="input"/>
				</div>
				<div style="margin-top: 20px;">
					确认新密码：
					<input type="password"  name="reNewPassword" id="reNewPassword" class="input"/>
				</div>
				<div style="margin-top: 20px;text-align: center;">
					<span class="errorMsg" style="color:red" id="errorMsg"></span>
					<span class="successMsg" style="color:green" id="successMsg"></span>
				</div>
				<div style="margin-top: 40px;text-align: center;">
					<input class="button" type="button" value="保存" id="save" style="margin-right:30px;width: 60px;  height:30px;"></input>
					<input class="button" type="button" value="清空" id="clear" style="width: 60px;  height:30px;"></input>
				</div>
			</div>
		</div>
	</div>

</div>

<script>
		//清空按钮
		$("#clear").click(function(){
					$("#password").val("");
					$("#newPassword").val("");
					$("#reNewPassword").val("");
					$("#errorMsg").text("");
					$("#successMsg").text("");
					$("#save").attr("disabled",false);
					$("#save").attr("style","margin-right:30px;width: 60px;  height:30px;opacity:1");
				}
		);

		//保存按钮
		$("#save").click(function(){

					var password = $("#password").val();
					var newPassword = $("#newPassword").val();
					var reNewPassword = $("#reNewPassword").val();

					var password=/(?!^[0-9]+$)(?!^[A-z]+$)(?!^[_*&^%$#@!?=+<>]+$)(?!^[^A-z0-9]+$)^.{6,16}$/;
					if (password == "") {
						$("#errorMsg").text("旧密码不能为空！");
					}else if (newPassword == "") {
						$("#errorMsg").text("新密码不能为空！");
					}else if (reNewPassword == "") {
						$("#errorMsg").text("确认新密码不能为空！");
					}else if (newPassword != reNewPassword) {
						$("#errorMsg").text("新密码必须一致！");
					} else{

						var uid = $("#uid").val();

						$.ajax({
							url: "sp-user/cloudvideo/user/updatePwd",
							type: "POST",
							data: {
								uid: uid,
								password: password,
								newPassword: newPassword
							},
							dataType: 'text',

							success: function (data) {
								if(data == 1){
									$("#errorMsg").text("");
									$("#successMsg").text("密码修改成功！");
									$("#save").attr("disabled",true);
									$("#save").attr("style","margin-right:30px;width: 60px;  height:30px;opacity:0.5");
								} else if (data == 3){
									$("#successMsg").text("");
									$("#errorMsg").text("输入的旧密码错误！");
								} else if (data == 4){
									$("#successMsg").text("");
									$("#errorMsg").text("当前用户不存在，请重新登录！");
								} else {
									$("#successMsg").text("");
									$("#errorMsg").text("密码修改失败，请联系管理员！");
								}

							},
							error: function (msg) {
								$("#successMsg").text("");
								$("#errorMsg").text("密码修改失败，请联系管理员！");
							}
						})


					}
				}
		);

</script>
</body>
</html>